<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <!-- 
            注意:
                我们在new Vue(options)中传入的 data 已经被Vue收取,并将其放入了 vm 中名为 _data 的属性中,也就是说 : data === _data
            
            Vue中的数据代理:
                通过 vm 对象来代理对 _data 属性来进行操作(读/写)
            优势:
                ---对程序员来说:   操作数据更加便捷,无需赘述 {{_data.name}} 
                ---对数据监听来说: 将程序员使用和操作的数据(用户数据) 和 内部数据 分离开来,节省资源,提高效率
            4.基本原理：
					遍历_data对象中所有的属性，通过Object.defineProperty()一个一个都添加到vm上。
					随后vm上就拥有了_data中所有的属性，且都有自己的getter/setter。
					getter/setter内部操作（读/写）的是_data中对应的属性。
         -->

         <h3>姓名:{{name}}</h3>
         <h3>性别:{{gender}}</h3>
    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:'#demo',
            data:{
                name:'孙悟空',
                gender:'男'
            }
        })
    </script>
</body>

</html>